<style scoped lang="less">
</style>
<template>
	<div class="device-detail-basic">
		
		<div class="mt-20 flex v-c">
			<el-form :inline="true">
				<el-form-item label="参数类型：">
					<el-select v-model="filterForm.id" placeholder="请选择" @change="typeChange">
				      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in typeList" :key="index"></el-option>
				    </el-select>
				</el-form-item>
			</el-form>
			<div class="recent-week flex-1 text-right">
				<a class="item" :class="{active: activeDateIndex==index}" href="javascript:;" v-for="(item,index) in recentWeek" :key="index" @click="changeDate(item,index)">{{item.month}}月{{item.date}}日</a>
			</div>
		</div>
		<div class="main-blk mt-10" v-for="(item,index) in dataList">
			<div class="flex">
				<p class="fs-12" style="opacity: 0.5">滚动鼠标缩放，按住Shift建拖动鼠标左右平移1</p>
			</div>
			<el-row class="chart-row" :gutter="20">
				<el-col :span="24">
					<div :id="'lineChart'+index"></div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
export default {
	name: 'deviceDetailOter',
	props: {
		scale: {
			type: Number,
			default: 1
		},
		id: { // 设备ID
			type: String,
			default: ''
		},
		classify: { //物联网类型
			type: String,
			default: 'fire'
		},
	},
	components: {
	},
	watch: {
	},
	data () {
		return {
			filterForm: {},
			recentWeek: [],
			activeDateIndex:6,
			dataList: [],
			typeList:[]
		}
	},
	methods: {
		getType(){
			this.$get('/fireFightingIOT/device/eleNormalOtherList').then(res=>{
				this.typeList = res.data
				this.filterForm.id = res.data[0].id
				this.getData()
			})
		},
		getData(){
			let activeDate = this.recentWeek[this.activeDateIndex]
			this.openFullLoading()
			this.$post('/fireFightingIOT/device/normalDataLogList',{
				deviceClassify: this.classify,
				deviceId: this.id,
				time: `${activeDate.year}-${activeDate.month}-${activeDate.date}`,
				tabflag: this.classify=='1' ? 3 : 1,
				id: this.filterForm.id
			}).then(res => {
				this.closeFullLoading()
				this.dataList = res.data.oneList|| []
				
				this.$nextTick(()=>{
					this.renderCharts ()
				})
				
			},err=>{
				this.closeFullLoading()
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		renderCharts () {
			for(let i = 0; i<this.dataList.length; i++){
				this.renderLineChart(i)
			}
		},
		renderLineChart (index) {
			let data = [...this.dataList[index].twoList]
			let series = []
			let categories = []
			if(data.length>0){
				let categories = data[0].valueList.map(item=>item.sendtime)
				data.forEach(item=>{
					let valueList = item.valueList
					series.push({
						name: item.name,
						data: valueList.map(item=>{
							let activeDate = this.recentWeek[this.activeDateIndex]
							let time = item.sendtime.split(':')
							let date = Date.UTC(activeDate.year,activeDate.month-1,activeDate.date,+time[0],+time[1],0)
							return [date, +item.value]
						})
					})
				})
			}
			
			let chartData = {
				categories: categories,
				series: series
			}
			this.utils.renderSpline({
				id: 'lineChart'+index,
				chartData: chartData,
				width: 925,
				height: 220,
				scale: this.scale
			})
		},

		formatDate(d){
			let year = d.getFullYear()
			let month = d.getMonth()+1
			let date = d.getDate()
			return {year, month, date}
		},
		getRencentWeek () {
			const today = new Date()
			let dates = []
			for (let i=6;i>=0; i--){
				let thisDate = new Date()
				thisDate.setTime(thisDate.getTime() - 3600 * 1000 * 24 * i)
				dates.push(this.formatDate(thisDate))
			}
			this.recentWeek = dates
		},
		changeDate(item,index) {
			this.activeDateIndex = index
			this.getData()
		},
		typeChange () {
			this.getData()
		}
	},
	created () {
		this.getType()
		this.getRencentWeek()
		
	},
}
</script>